<script setup lang="ts">
import OrderTimeLine from "@/components/OrderTimeLine.vue";
import { ref, computed } from "vue";
import type { OrderDetail, GoodsDetail } from "@/types/order";
import OrderStatus0 from "@/components/orderStatus/OrderStatus0.vue";
import OrderStatus1 from "@/components/orderStatus/OrderStatus1.vue";
import OrderStatus2 from "@/components/orderStatus/OrderStatus2.vue";
import OrderStatus3 from "@/components/orderStatus/OrderStatus3.vue";
import OrderStatus4 from "@/components/orderStatus/OrderStatus4.vue";
import OrderStatus5 from "@/components/orderStatus/OrderStatus5.vue";
import OrderStatus6 from "@/components/orderStatus/OrderStatus6.vue";
import OrderStatus7 from "@/components/orderStatus/OrderStatus7.vue";
import OrderStatus8 from "@/components/orderStatus/OrderStatus8.vue";
import { useUser } from "@/store/useUser";
const userStore = useUser();

const props = defineProps({
  orderDetails: {
    type: Object,
    required: true,
    default: () => ({}),
  },
  goodsDetails: {
    type: Object,
    required: true,
    default: () => ({}),
  },
});

const rate1 = ref(3);

const startTime = computed(() => {
  if (!props.orderDetails?.startServerDay) return "";
  return new Date(props.orderDetails.startServerDay).toLocaleDateString(
    "zh-CN"
  );
});

//
const orderTimeLineData = computed(() => {
  const data = [];
  if (props.orderDetails.createTime) {
    data.push({
      title: "待支付",
      time: props.orderDetails.createTime,
    });
  }
  if (props.orderDetails.payTime) {
    data.push({
      title: "订单支付",
      time: props.orderDetails.payTime,
    });
  }
  if (props.orderDetails.knowTime) {
    data.push({
      title: "已知悉",
      time: props.orderDetails.knowTime,
    });
  }
  if (props.orderDetails.requireTime) {
    data.push({
      title: "提交需求共识",
      time: props.orderDetails.requireTime,
    });
  }
  if (props.orderDetails.startTime) {
    data.push({
      title: "服务开启",
      time: props.orderDetails.startTime,
    });
  }
  if (props.orderDetails.acceptanceTime) {
    data.push({
      title: "发起验收",
      time: props.orderDetails.acceptanceTime,
    });
  }
  if (props.orderDetails.confirmTime) {
    data.push({
      title: "确认验收",
      time: props.orderDetails.confirmTime,
    });
  }
  if (
    props.orderDetails.cancelFlag === 1 ||
    props.orderDetails.cancelFlag === 2
  ) {
    data.push({
      title: `${
        props.orderDetails.cancelFlag === 1 ? props.orderDetails.nickName : "你"
      } 取消了订单`,
      time: props.orderDetails.cancelTime,
    });
  }
  return data;
});
// 评价列表
const commentList = computed(() => {
  const list = [];
  if (!props.orderDetails.comment && !props.orderDetails.salesComment)
    return [];
  // 克隆数据
  let cloneSalesComment = {};
  try {
    cloneSalesComment = JSON.parse(
      JSON.stringify(props.orderDetails.salesComment)
    );
    if (cloneSalesComment) cloneSalesComment.userType = "sales";
  } catch (e) {
    console.log(e);
  }
  let cloneComment = {};
  try {
    cloneComment = JSON.parse(JSON.stringify(props.orderDetails.comment));
    if (cloneComment) cloneComment.userType = "user";
  } catch (e) {
    console.log(e);
  }
  if (!props.orderDetails.comment && props.orderDetails.salesComment) {
    list.push(cloneSalesComment);
  }
  if (props.orderDetails.comment && !props.orderDetails.salesComment) {
    list.push(cloneComment);
  }
  if (props.orderDetails.comment && props.orderDetails.salesComment) {
    // 判断commentTime字段，先评价的放在后面
    const commentTime = new Date(props.orderDetails.commentTime).getTime();
    const salesCommentTime = new Date(props.orderDetails.commentTime).getTime();

    if (commentTime > salesCommentTime) {
      list.push(cloneSalesComment);
      list.push(cloneComment);
    } else {
      list.push(cloneComment);
      list.push(cloneSalesComment);
    }
  }
  return list;
});
</script>

<template>
  <div class="order-status">
    <OrderStatus0
      v-if="orderDetails?.status === 0"
      :orderDetails="orderDetails"
      :goodsDetails="goodsDetails"
    />
    <OrderStatus1
      v-if="orderDetails?.status === 1 && !orderDetails?.stepStatus"
      :orderDetails="orderDetails"
      :goodsDetails="goodsDetails"
    />
    <OrderStatus2
      v-if="orderDetails?.status === 1 && orderDetails?.stepStatus === 1"
      :orderDetails="orderDetails"
      :goodsDetails="goodsDetails"
    />
    <OrderStatus3
      v-if="orderDetails?.status === 1 && orderDetails?.stepStatus === 2"
      :orderDetails="orderDetails"
      :goodsDetails="goodsDetails"
    />
    <OrderStatus4
      v-if="
        orderDetails?.status === 3 &&
        (orderDetails?.stepStatus === 4 || orderDetails?.stepStatus === 5)
      "
      :orderDetails="orderDetails"
      :goodsDetails="goodsDetails"
    />
    <OrderStatus5
      v-if="orderDetails?.status === 3 && orderDetails?.stepStatus === 6"
      :orderDetails="orderDetails"
      :goodsDetails="goodsDetails"
    />
    <OrderStatus6
      v-if="
        (orderDetails?.status === 5 || orderDetails?.status === 6) &&
        !orderDetails?.salesCommentStatus
      "
      :orderDetails="orderDetails"
      :goodsDetails="goodsDetails"
    />
    <OrderStatus7
      v-if="orderDetails?.status === 6 && orderDetails?.salesCommentStatus"
      :orderDetails="orderDetails"
      :goodsDetails="goodsDetails"
    />
    <OrderStatus8
      v-if="orderDetails?.status === 2"
      :orderDetails="orderDetails"
      :goodsDetails="goodsDetails"
    />
  </div>
  <div class="order-timeline">
    <OrderTimeLine v-for="item in commentList" :key="item.id">
      <p>
        {{
          item.userType === "sales"
            ? userStore.userInfo.nickName
            : orderDetails.nickName
        }}
        给出了评价
      </p>
      <p>
        <span>{{ item.userType === "sales" ? "专业能力" : "服务满意" }}</span>
        <el-rate
          disabled
          :model-value="
            item.userType === 'sales'
              ? item.competenceScore
              : item.requireClarityScore
          "
          show-score
          :colors="['#1DBF73', '#1DBF73', '#1DBF73']"
        />
      </p>
      <p>
        <span>{{ item.userType === "sales" ? "服务态度" : "响应及时" }}</span>
        <el-rate
          :model-value="
            item.userType === 'sales' ? item.attitudeScore : item.responseScore
          "
          :colors="['#1DBF73', '#1DBF73', '#1DBF73']"
          disabled
          show-score
        />
      </p>
      <p>
        <span>{{ item.userType === "sales" ? "交付质量" : "协作顺畅" }}</span>
        <el-rate
          :model-value="
            item.userType === 'sales' ? item.qualityScore : item.cooperateScore
          "
          show-score
          :colors="['#1DBF73', '#1DBF73', '#1DBF73']"
          disabled
        />
      </p>
      <p class="text">
        {{ item.comment }}
      </p>
      <div
        class="demo-image__preview"
        v-if="item.commentPics && item.commentPics.length"
      >
        <el-image
          v-for="img in item.commentPics"
          :key="img"
          style="width: 74px; height: 54px; border-radius: 4px"
          :src="img"
          :zoom-rate="1.2"
          :max-scale="7"
          :min-scale="0.2"
          :preview-src-list="item.commentPics"
          :initial-index="4"
          fit="scale-down"
        />
      </div>
    </OrderTimeLine>
    <OrderTimeLine
      v-for="item in orderTimeLineData.reverse()"
      :key="item.title"
    >
      <p>{{ item.title }}</p>
      <p>{{ item.time || "-" }}</p>
    </OrderTimeLine>
  </div>
</template>

<style scoped lang="scss">
.order-status {
  background: #ffffff;
  box-shadow: 0px 0px 16px 0px rgba(11, 13, 18, 0.06);
  border-radius: 16px 16px 16px 16px;
  border: 1px solid rgba(25, 30, 40, 0.08);
  padding: 22px;
  margin-bottom: 16px;

  .status-line {
    display: flex;
    align-items: center;
    font-size: 20px;
    margin-bottom: 12px;

    img {
      margin-right: 10px;
      width: 24px;
      height: 24px;
    }
  }

  .status-tips {
    padding-left: 24px;
    color: rgba(25, 30, 40, 0.48);
  }
}
.order-timeline {
  background: #ffffff;
  box-shadow: 0px 0px 16px 0px rgba(11, 13, 18, 0.06);
  border-radius: 16px 16px 16px 16px;
  border: 1px solid rgba(25, 30, 40, 0.08);
  padding: 22px;
  p {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    &:first-child {
      font-weight: bold;
    }
    span {
      margin-right: 8px;
    }
    img {
      max-height: 54px;
    }
  }
}
</style>

<style>
.el-rate {
  height: auto;
}
</style>
